<template>
  <ul class="user_overview flex">
    <li class="user_overview-item" v-for="item in statisticsData" :key="item">
      <div class="user_overview_nums" :class="{
        one: item.name === '城中村' || item.name === '社区',
        two: item.name === '街道' || item.name === '乡镇',
        three: item.name === '小区' || item.name === '区县',
      }">
        <CountUp :endVal="item.value" :duration="duration" />
      </div>
      <p>{{ item.name }}</p>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { reactive, ref, computed } from "vue";
// import { countDeviceNum } from "@/api";
import CountUp from "@/components/countUp";
import { useMapLayerStore } from "@/stores";
import { LayerInfoType } from "@/types";
import { exportJsonToExcel } from "@/utils"

const mapLayerStore = useMapLayerStore();

let downloadList: Record<string, any>[] | { 区域类型: string; 数量: number; }[] = [];

const download = () => {
  exportJsonToExcel(downloadList, "调研区域统计", "统计结果")
};
const statisticsData = computed(() => {
  const currentData = mapLayerStore.currentMapData;
  if (currentData.length) {
    const result = {
      城中村: {
        name: "城中村",
        value: 0,
      },
      街道: {
        name: "街道",
        value: 0,
      },
      小区: {
        name: "小区",
        value: 0,
      },
      社区: {
        name: "社区",
        value: 0,
      },
      乡镇: {
        name: "乡镇",
        value: 0,
      },
      区县: {
        name: "区县",
        value: 0,
      },
    };

    type RegionTypeKey = keyof typeof result;

    currentData.forEach((item: LayerInfoType) => {
      const key = item.regionType as RegionTypeKey;
      if (key in result) {
        result[key].value++;
      }
    });
    downloadList = Object.entries(result).map(([key, item]) => {
      return {
        "区域类型": key,
        "数量": item.value,
      };
    });
    return result;
  } else {
    return {};
  }
});

const duration = ref(2);
// const state = reactive({
//   alarmNum: 0,
//   offlineNum: 0,
//   onlineNum: 0,
//   totalNum: 0,
// });

defineExpose({
  download
});
</script>


<style scoped lang="scss">
.left-top {
  width: 100%;
  height: 100%;
}

.user_overview {
  flex-wrap: wrap;

  li {
    // flex: 1;
    width: 33%;

    &:nth-child(1) {
      color: #00fdfa;
    }

    &:nth-child(2) {
      color: #07f7a8;
    }

    &:nth-child(3) {
      color: #e3b337;
    }

    &:nth-child(4) {
      color: #00fdfa;
    }

    &:nth-child(5) {
      color: #07f7a8;
    }

    &:nth-child(6) {
      color: #e3b337;
    }

    p {
      text-align: center;
      height: 40px;
      font-size: 16px;
    }

    .user_overview_nums {
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 22px;
      margin: 0 auto 8px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .one {
      &::before {
        background-image: url("@/assets/img/left_top_lan.png");
      }
    }

    .two {
      &::before {
        background-image: url("@/assets/img/left_top_lv.png");
      }
    }

    .three {
      &::before {
        background-image: url("@/assets/img/left_top_huang.png");
      }
    }
  }
}
</style>
